<template>
    <div id="list">
        <scroller v-if="items.length>0"
                  :on-refresh="refresh"
                  :on-infinite="infinite">
            <ul>
                <li v-for="(item,index) in items" :key="index"
                    @click="jumpfn('竞猜详情',`/huodongland/guessdetails/${item.id}`)">
                    <p class="headtop">
                        <icon name="data"/>
                        <span>第{{item.issueNo}}期 &nbsp;&nbsp;{{item.matchTime}} &nbsp;&nbsp;{{item.weekNo}}</span>
                    </p>
                    <section>
                        <div class="sl">
                            <img :src="item.homeLogo||'//common-1253410441.file.myqcloud.com/activityimg/20180202115731.png'"
                                 alt="">
                            <span>{{item.home}}</span>
                        </div>
                        <b class="middle">{{[item.state,item.score] | overscore}}</b>
                        <div class="sr">
                            <span>{{item.visitor}}</span>
                            <img :src="item.visitorLogo||'//common-1253410441.file.myqcloud.com/activityimg/20180202115731.png'"
                                 alt="">
                        </div>
                    </section>
                    <footer>
                        <span>猜中人数：<b>{{[item.state,item.winJoinerCounts]|getnumv}}</b>人</span>
                        <span>当期奖金：<b>{{[item.state,item.joinerAvgWinMoney]|getnumv}}</b>元</span>
                    </footer>
                </li>
            </ul>
        </scroller>
        <div v-else class="nodata">
            <img src="//common-1253410441.file.myqcloud.com/coverimg/20170622203327.png" alt="">
            <span>暂无数据</span>
        </div>
    </div>
</template>

<script>
    import {Marquee, MarqueeItem, Toast, Tab, TabItem, Sticky} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative, h5tonative} from '../../utils/otherfn';
    import {beforeGuessR} from '../../services/huodong/guess';
    import {namesource, jumptype} from '../../utils/config/common';
    import axios from 'axios';
    import {delay} from '../../utils/common';
    import {concat} from 'ramda';
    export default {
        components: {
            Marquee,
            MarqueeItem,
            Toast,
            Tab,
            TabItem,
            Sticky
        },
        data() {
            return {
                page: 0,
                items: []
            };
        },
        filters: {
            overscore([state,score]){
                if(state === -2) {
                    return '取消'
                }
                return score
            },
            getnumv([state,val]){
                if(state === -2) {
                    return '0'
                }
                if([1, 2, 3].indexOf(state) > -1) {
                    return '--'
                }
                return val;
            },
        },
        created() {
            this.getlists(1)
        },
        computed: {},
        methods: {
            /**
             * 获取一些初始化信息
             */
            jumpfn(name, url){
                const jumpurl = `${location.origin}/tg/#${url}`;
                h5tonative(name, jumpurl, ()=> {
                    location.href = jumpurl;
                });
            },

            async refresh(done){
                await delay(1000);
                this.page = 1;
                await this.getlists(1);
                done();
            },
            async infinite(done){
                await delay(1000);
                const over = await this.getlists(this.page + 1, true);
                if(over) {
                    done(true);
                    return;
                }
                this.page = this.page + 1;
                done();
            },
            async getlists(page, loadermore){
                const {token}=await getMytoken(true);

                const {data}= await beforeGuessR(token, page);
                if(data && data.code === 0) {
                    if(loadermore) {
                        if(data.data.activities.length === 0) {
                            return true;
                        }
                        else {
                            this.items = concat(this.items, data.data.activities);
                        }
                    }
                    else {
                        this.page = 1;
                        this.items = data.data.activities;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    #list {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100%;
        ul {
            li {
                background: #fff;
                padding: 0 28px;
                margin-bottom: 20px;
                .headtop {
                    height: 67px;
                    display: flex;
                    align-items: center;
                    font-size: 24px;
                    color: #999;
                    svg {
                        width: 28px;
                        height: 28px;
                        margin-right: 20px;
                    }
                }
                section {
                    height: 144px;
                    border-top: 1px solid #e6e6e6;
                    border-bottom: 1px solid #e6e6e6;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 28px;
                    .middle {
                        font-size: 36px;
                        color: #ff5f5f;
                    }
                    div {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        min-width: 300px;
                        &.sl {
                            justify-content: flex-start;
                            img {
                                margin-right: 20px;
                            }
                        }
                        &.sr {
                            justify-content: flex-end;
                            img {
                                margin-left: 20px;
                            }
                        }
                    }
                    img {
                        width: 90px;
                        height: 90px;
                        border-radius: 50%;
                        display: inline-block;
                    }
                }
                footer {
                    height: 70px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 24px;
                    color: #999;
                    b {
                        color: #ff5f5f;
                    }
                }
            }
        }
        .nodata {
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: center;
            align-items: center;
            img {
                display: block;
                width: 100%;
            }
            span {
                margin-top: 30px;
                color: #666;
                font-size: 30px;
            }
        }
    }
</style>